// Captcha: 全自动区分人与计算机的图灵测试（验证码）
// 细节：
// 1、验证码实质上是啥？  图片
// 2、验证码可以被点击 因为可能存在看不清的情况
// 3、验证码的获取方式：
//            a. 验证码是由后端产生的且由后端验证
//            b. 两种获取展示方式：
//                  1、后端直接输出图片
//                  2、后端输出图片的编码字符串
//                  无论是哪一种方式的获取，用法是一样的，如果输出图片，我们只需要将图片的地址给到img 标签的src属性，如果是编码字符串，则也是给到img的src属性
// 4、验证码在做前后端分离项目的时候，后端除了给验证码以外，还会给到一个key值，key值是与验证码唯一一一对应的【要理解key值的作用】key值后续需要再提交用户输入的验证码的时候一并提交给服务端（前端需要负责key值的临时存储，获取之后，提交之前）
// 5、既然是封装就要考虑全面，还需要考虑验证码的尺寸大小的通用性
// 6、key值存储的问题：谁调用验证码，就把key值存到谁那【否则存在当前组件中会出现key值被覆盖的问题】

// 使用方法：
// a. 需要在使用验证码的组件中趣导入并使用验证码组件
// b. 该组件接收三个props属性：
//    w: 验证码图片宽度
//    h: 验证码图片高度
//    setKey：用于让父组件获取并保存key值的方法，必须传递

import React, { Component } from 'react';
import axios from "axios"

class Captcha extends Component {
  state = {}
  render() {
    // 灵活的去获取尺寸大小
    let w = this.props.w || 120
    let h = this.props.h || 40
    return <img src={this.state.img} alt="点击刷新验证码" onClick={this.loadCaptcha.bind(this)} width={w} height={h} />
  }

  // 刷新验证码
  loadCaptcha () {
    axios.get("https://reactapi.iynn.cn/captcha/api/math")
      .then((res) => {
        // console.log(res)
        this.setState({
          key: res.data.key,
          img: res.data.img
        })
        // 假设父传递一个方法来获取key值，拟定方法名为setKey
        this.props.setKey(res.data.key)
      })
  }

  componentDidMount () {
    this.loadCaptcha()
  }
}

export default Captcha;
